import { PureComponent } from "react"

export default class Inherit extends PureComponent {
  constructor() {
    super()
    this.state = {
      inputValue: "默认值"
    }
  }

  inputChange(event) {
    // console.log(event) 必须要赋值 理论上还是要更新视图
    this.setState({
      inputValue: event.target.value
    })
  }

  render() {
    return (
      <div>
        <div className='borderSplit'>
          {/*  绑定了value默认值之后就变成受控组件,变成readonly不能输入 */}
          受控input:
        <input value={this.state.inputValue} />
        </div>

        <div className="borderSplit">
          {/* 必须要用onChange去重新赋值才能受控 */}
          非受控input:
          <input
            value={this.state.inputValue}
            onChange={(e) => this.inputChange(e)}
          />
        </div>
      </div>
    )
  }
}
